<template>
  <div :class="[prefixCls]" @click="">
    <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">

      <!-- 鼠标画上去有文字显示按钮 -->
      <el-tooltip v-if="action.tooltip && !action.popConfirm" :content="action.tooltip" effect="customized">
        <el-button v-bind="omit(action, 'icon')">
          <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" :color="action.color" />
          <template v-if="action.label">{{ action.label }}</template>
        </el-button>
      </el-tooltip>

      <!--  单确认弹出按钮 -->
      <el-popover v-else-if="action.tooltip && action.popConfirm" v-model:visible="showProp" placement="top"
        :width="160">
        <p>{{ action.popConfirm.title }}</p>
        <div style="text-align: right; margin: 0">
          <el-button size="small" text @click="showProp = false">{{ action.popConfirm.cancelText }}</el-button>
          <el-button size="small" type="primary" v-bind="{ onClick: action.popConfirm.confirm }"
            @click="showProp = false">{{ action.popConfirm.okText }}</el-button>
        </div>
        <template #reference>
          <div style="display: inline-block;">
            <el-tooltip v-if="action.tooltip" :content="action.tooltip" effect="customized">
              <el-button @click="showProp = true">
                <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon"
                  :color="action.color" />
                <template v-if="action.label">{{ action.label }}</template>
              </el-button>
            </el-tooltip>
          </div>
        </template>
      </el-popover>
      <!-- 普通按钮 -->
      <el-tooltip v-else :content="action.tooltip" effect="customized">
        <el-button v-bind="omit(action, 'icon')">
          <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" :color="action.color" />
          <template v-if="action.label">{{ action.label }}</template>
        </el-button>
      </el-tooltip>
      <el-divider direction="vertical" v-if="divider && index < getActions.length - 1" />
    </template>
  </div>
</template>
<script lang="ts" setup>
import { useDesign } from '@/hooks/web/useDesign';
import { computed, ref, toRaw } from 'vue';
import { useTableContext } from '../hooks/useTableContext';
import { TableActionType } from '../types/table';
import { ActionItem } from '../types/tableAction';
import { Icon } from '@/components/SvgIcon';
import { omit } from 'lodash-es';


const { prefixCls } = useDesign('basic-table-action');
const showProp = ref(false)

interface Props {
  actions: Array<ActionItem>;
  divider?: boolean;
  outside?: boolean;
  stopButtonPropagation?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  divider: true,
  outside: false,
  stopButtonPropagation: false,
})

let table: Partial<TableActionType> = {};
if (!props.outside) {
  table = useTableContext();
}

const getActions = computed(() => {
  return (toRaw(props.actions) || [])
})


</script>